<form class="flex" [formGroup]="form" (submit)="onSubmit(form,$event)">
  <mat-card>
    <mat-card-header>
      <mat-card-title>登录：</mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <mat-form-field class="example-full-width">
        <input matInput placeholder="您的eamil" formControlName="email">
      </mat-form-field>
      <mat-form-field class="example-full-width">
        <input matInput placeholder="您的密码" formControlName="password" type="password">
      </mat-form-field>
      <mat-form-field class="example-semi-width">
        <input matInput placeholder="请输入验证码" formControlName="vericode">
      </mat-form-field>
      <canvas #veri [attr.width]="w" [attr.height]="h" (click)="paint()"></canvas>
      <mat-error>{{form.getError('code',['vericode'])?.descxx}}</mat-error>
      <button mat-raised-button type="submit" color="accent" [disabled]="!form.valid">登录</button>
    </mat-card-content>
    <mat-card-actions class="text-algin">
      <p>还没有账户?<a routerLink="/register">注册</a></p>
      <p>忘记密码?<a href="">找回</a></p>
    </mat-card-actions>
  </mat-card>
  <mat-card>
    <mat-card-header>
      <mat-card-title>每日佳句</mat-card-title>
      <mat-card-subtitle>{{(quote$|async)?.cn}}</mat-card-subtitle>
    </mat-card-header>
    <img mat-card-image src="{{(quote$|async)?.pic}}" alt="ym" height="300px">
    <mat-card-content>
      {{(quote$|async)?.en}}
    </mat-card-content>
  </mat-card>
</form>

